<template>


    <div id="cs_content">
            <x-header class="cs_head_nav" style="background-color: #333;width:100%;left:0;top:0;z-index:100;">
            <span>SG漫画</span>
            <x-icon @click="show_menu" slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
            </x-header>

            <!--banner-->
            <swiper auto :list="banner_list"  @on-index-change="banner_change"></swiper>

            <!--导航-->
            <grid :show-lr-borders="false" :show-vertical-dividers="false">
                <grid-item label="小说"  link="/book">
                <img class="cs_nav_icon" slot="icon" src="./../static/img/nav1.png">
                </grid-item>
                <grid-item label="充值"  link="/recharge">
                <img class="cs_nav_icon" slot="icon" src="./../static/img/nav2.png">
                </grid-item>
                <grid-item label="免费"  link="/free">
                <img class="cs_nav_icon" slot="icon" src="./../static/img/nav3.png">
                </grid-item>
                <grid-item label="分类"  link="/category">
                <img class="cs_nav_icon" slot="icon" src="./../static/img/nav4.png">
                </grid-item>
            </grid>

            <!--热门推荐-->
            <grid :cols="3" :show-lr-borders="false" :show-vertical-dividers="false" >
                <grid-item v-for="item in list"  :key="item.id" :link="item.url">
                <div class="cs_novel_logo">
                <x-img  :src="item.src" default-src="./../img/book_def.png" ></x-img>
                </div>

                <p class="cs_novel_name">{{item.title}}</p>
                </grid-item>
            </grid>



            <!--图文列表-->
            <panel header="热门推荐"  :list="list" type="5" ></panel>

            <!--返回顶部按钮-->
            <img v-if="is_far" @click="go_top" class="cs_go_top" src="./../static/img/to_top.png" alt="返回顶部">






            <!--<tabbar>-->
                <!--<tabbar-item selected link="/component/demo">-->
                    <!--<img slot="icon" src="./../static/img/nav2.png">-->
                    <!--<span slot="label">首页</span>-->
                <!--</tabbar-item>-->
                <!--<tabbar-item  link="/component/demo">-->
                    <!--<img slot="icon" src="./../static/img/nav2.png">-->
                    <!--<span slot="label">分类</span>-->
                <!--</tabbar-item>-->
                <!--<tabbar-item show-dot  link="/component/demo">-->
                    <!--<img slot="icon" src="./../static/img/nav2.png">-->
                    <!--<span slot="label">书架</span>-->
                <!--</tabbar-item>-->
                <!--<tabbar-item badge="2" link="/component/demo">-->
                    <!--<img slot="icon" src="./../static/img/nav2.png">-->
                    <!--<span slot="label">我的</span>-->
                <!--</tabbar-item>-->
            <!--</tabbar>-->
    </div>



</template>
<script>
import {Group, Cell, XHeader, Swiper, SwiperItem, Grid, GridItem, Panel,XImg, ViewBox, Tabbar, TabbarItem } from 'vux'
const bannerList = []
export default {
    name: 'index',
    components: {
        Group,
        Cell,
        XHeader,
        Swiper,
        SwiperItem,
        Grid,
        GridItem,
        Panel,
        XImg,
        ViewBox,
        Tabbar,
        TabbarItem
    },
    data () {
    return {
        banner_list: bannerList,
        list: [],
        is_far:false
    }
    },
    methods: {
        banner_change: function (e){
        // console.log(e)
        },
        handleScroll () {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            const offsetTop = document.querySelector('#cs_content').offsetTop
            console.log(scrollTop)
            const winHight = document.body.clientHeight;
            // console.log(winHight)
            if(scrollTop>700){
              this.is_far = true
            }else {
              this.is_far = false
            }

            if (scrollTop > this.scrollTop) {
            //   this.searchBarFixed = false
            //   this.scrollTop = scrollTop
            // } else {
            //   this.searchBarFixed = true
            //   this.scrollTop = scrollTop
            }
        },
        go_top(){
          // return  this.$refs.viewBox.scrollTo(0)
          const scrollToptimer = setInterval(function () {
            const top = document.body.scrollTop || document.documentElement.scrollTop;
            const speed = top / 4;

            if (document.body.scrollTop!=0) {
              document.body.scrollTop -= speed;
            }else {
              document.documentElement.scrollTop -= speed;
            }
            if (top == 0) {

              clearInterval(scrollToptimer);
            }
          }, 30);
        },
        // 显示菜单
        show_menu: function () {
          this.bus.$emit('menuShow', true)
          console.log('menuShow事件发送')
        }
    },
    created: function () {
        this.$ajax.post('/api/nover_hot',{
        i:'59',

        }).then((response)=>{
            const newsList=response.data.data.rows;
            console.log(newsList)
            const reslist = []
            const bannerList = []
            for (const i in newsList){
                const item = newsList[i]
                // console.log(item)
                const listitem = {
                    src:item.logo,
                    title:item.name,
                    desc:item.description,
                    url: '/chapter?nid='+item.collect_id,
                    fallbackSrc: 'https://cn.vuejs.org/images/logo.png',
                    meta: {
                        source: item.author,
                        date: item.update_time.substr(0,10),
                        other: parseInt(item.view_count/10000)+'万'
                    }
                }

                const banner_item = {
                    url: '/chapter?nid='+item.collect_id,
                    img: item.banner, // 404
                    title: item.name,
                    fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
                }
                reslist.push(listitem)
                    bannerList.push(banner_item)
            }
            this.list = reslist
            this.banner_list = bannerList
        }).catch((response)=>{
            console.log(response);
        })


    },
  mounted () {
    // let scrBody = this.$refs.viewBox.getScrollBody()
    window.addEventListener('scroll', this.handleScroll)
  }
}


</script>

<style scoped lang="stylus">

    .cs_go_top
        width 40px
        height 40px
        position: fixed
        bottom 60px
        right 15px
        z-index 9999
    .cs_novel_logo
        width 100%
        height 0
        padding-bottom 140%
    .cs_novel_name
        font-size  1rem
        line-height 2rem
        text-align center
        color #666
</style>
